<div class="page-header">
    <h1>
        Cetak SN
        <small>
            <i class="icon-double-angle-right"></i>
            Cetak SN Baru
        </small>
    </h1>
</div>

<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
            
        <table id="grid-table"></table>

        <div id="grid-pager"></div>

        <script type="text/javascript">
                var $path_base = "/";//this will be used in gritter alerts containing images
        </script>
        <br/>
        <button class="btn btn-info" type="button" onclick="if (confirm('Cetak SN?')) downloadExcel()">
            <i class="icon-ok bigger-110"></i>
            Cetak SN
        </button>
        <!-- PAGE CONTENT ENDS -->
    </div>
</div>


<script>
    jQuery(function($) {

            jQuery('#grid-table').jqGrid({
                url:'<?php echo $this->url() ?>/../../jsondata/cetaksn',
                datatype: "json",
                height: 150,
                colNames:['SN','PIN'],
                colModel:[
                    {name:'SN',index:'sn_code', width:300},
                    {name:'PIN',index:'sn_pin', width:300}
                ],
                rowNum:10,
                rowList:[10,20,30],
                pager: '#grid-pager',
                sortname: 'sn',
                viewrecords: true,
                sortorder: "desc",
                caption:"Cetak SN Baru",
                rownumbers: true,

                loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                                updateActionIcons(table);
                                updatePagerIcons(table);
                                enableTooltips(table);
                        }, 0);
                },

                autowidth: true
            });

            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',{edit:false,add:false,del:false});


            //navButtons            
            jQuery('#grid-table').jqGrid('navGrid','#grid-pager',
                    { 	//navbar options
                            search: true,
                            searchicon : 'ui-icon-search orange',
                            refresh: true,
                            refreshicon : 'ui-icon-refresh green'
                    }
            )
            



            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                    
                    var replacement =
                    {
                            'ui-icon-search' : 'ui-icon-search orange',
                            'ui-icon-refresh' : 'ui-icon-refresh green'
                    };
                    $(table).find('.ui-pg-div span.ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
                    
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                    var replacement =
                    {
                            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                    };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                            var icon = $(this);
                            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
            }

            function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

    });

    function validateNumber(evt) {

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
      }
      
    function downloadExcel(){

        var num = jQuery('#grid-table').jqGrid('getGridParam','records');

        if (num > 0){

            $.ajax({
            type: 'GET',
            dataType: 'text',
            url: '<?php echo $this->url() ?>/../../excel/cetaksn',
            data: {num: num},
            success: function(result){

                        if (result == "TIMEOUT"){
                            location.href = "<?php echo $this->url() ?>/../../admin";
                        }else{
                            location.href = "<?php echo $this->url() ?>/../../xls/"+result;
                        }
                 }
            });

        }else alert('Tidak terdapat SN Baru, silahkan lakukan Generate SN terlebih dahulu.');

    }

    function cek(){
        var msg = [];

        if ($('#num').val() == "") msg.push('<span>* Jumlah SN harus diisi</span>');
        if (msg.length == 0) return true;
        else{
            //alert("Data tidak lengkap:\n\n" + msg);
            //$.messager.alert("Data tidak lengkap:\n\n" + msg);
            $.messager.alert('Info', msg.join('<br/>'));
            return false;
        }
    }

    function cariSN(){

            if(cek()){

            var num = $('#num').val();


            $('#sn').datagrid({
                queryParams: {
                page: 1,
                rows: num,
                num: num
                }
                });


         var pager = $('#sn').datagrid('getPager');	// get the pager of datagrid
            pager.pagination({
                    buttons:[{
                            iconCls:'icon-excel',
                            handler:function(){
                                    downloadExcel();
                            }
                    }]
            });

        }
            
    }

   
</script>




